<template>
    <div id="check-result">
        <div class="wall">
            <!-- 搜索框 -->
            <el-row class="search-box">
                <el-form label-width="80px" size="small">
                    <el-col :span="4">
                        <el-form-item label="规则序号">
                            <el-input v-model="checkResultListMsg.submit.ruleId" placeholder="请输入规则序号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="检查表名">
                            <el-input v-model="checkResultListMsg.submit.checkTable" placeholder="请输入检查表名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="检查日期">
                            <el-date-picker
                                v-model="checkResultListMsg.submit.checkData"
                                format="yyyy-MM-dd"
                                value-format="yyyyMMdd"
                                type="date"
                                placeholder="请选择日期"
                                style="width:100%"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="级别">
                            <el-select v-model="checkResultListMsg.submit.checkResult" clearable placeholder="请选择级别">
                                <el-option key="" label="全部" value=""></el-option>
                                <el-option v-for="item in levelData" :key="item.key" :label="item.label" :value="item.key"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1">
                        <div style="display:flex;">
                            <el-button @click="searchCheckResultList" type="primary" size="mini">查询</el-button>
                            <el-button @click="exportCheckResult" type="primary" size="mini">导出</el-button>
                        </div>
                    </el-col>
                </el-form>
            </el-row>
            <!-- 表格 -->
            <el-row class="table-box">
                <risk-table
                    :msg="checkResultListMsg"
                    @handleChecked="handleChecked"
                    @getList="getCheckResultList"
                    @handleDetailsBtn="handleDetailsBtn"
                ></risk-table>
            </el-row>
            <el-dialog title="详情列表" :visible.sync="detailsVisible" width="50%">
                <el-table :data="tableDetalis" style="width: 100%" border tooltip-effect="dark">
                    <el-table-column prop="checkResult" label="执行结果" width="100">
                        <template slot-scope="scope">
                            <span :style="{ color: scope.row.checkResult == '1' ? '#ffb883' : scope.row.checkResult == '2' ? '#ff0000' : '' }">
                                {{ scope.row.checkResult == '1' ? '警告' : scope.row.checkResult == '2' ? '错误' : '--' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ruleId" label="规则序号" width="100"> </el-table-column>
                    <el-table-column prop="targetCode" label="指标编号" width="100"> </el-table-column>
                    <el-table-column prop="targetType" label="指标类型" width="100"> </el-table-column>
                    <el-table-column prop="ruleName" label="规则名称"> </el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="detailsVisible = false">取 消</el-button>
                    <el-button type="primary" @click="detailsVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import RiskTable from '@/common/components/risk-table.vue';
import { downLoadFile } from '@/utils/request';
@Component({
    name: 'CheckResult',
    components: { RiskTable },
})
export default class CheckResult extends Vue {
    // 级别下拉框数据
    levelData: any[] = [
        { key: 1, label: '警告' },
        { key: 2, label: '错误' },
    ];

    // 勾稽结果列表相关
    checkResultListMsg = {
        url: '/checkResult/list',
        // 需要提交的数据
        submit: {
            checkData: '',
            checkResult: '',
            checkTable: '',
            paging: { total: 0, currentPage: 1, pageSize: 25 },
            ruleId: '',
        },
        returnData: {},
        // 数据字段名
        dataKey: 'list',
        // 勾选列
        checked: { on: true, option: true },
        title: [
            { name: '执行结果', val: 'checkResult', width: 100, type: 'status', statusKV: { '1': '警告', '2': '错误' }, prop: 'checkResultColor' },
            { name: '规则序号', val: 'ruleId', width: 100 },
            { name: '指标编号', val: 'targetCode', width: 100 },
            { name: '指标类型', val: 'targetType', width: 100 },
            { name: '指标名称', val: 'targetName' },
            { name: '规则来源', val: 'ruleSource', width: 100 },
            {
                name: '规则类型',
                val: 'ruleType',
                type: 'status',
                statusKV: {
                    '1': '表数据量配置',
                    '2': '关联关系一对一配置',
                    '3': '关联关系一对多配置',
                    '4': '字段字典配置',
                    '5': '字段日期配置',
                    '6': '字段时间配置',
                    '7': '字段非NULL配置',
                    '8': '自定义sql配置',
                    '9': '存储过程',
                },
            },
            { name: '规则名称', val: 'ruleName' },
            {
                name: '操作',
                type: 'detailsBtn',
                btns: [{ title: '查看详情', type: 'primary', icon: 'el-icon-view' }],
                width: '60px',
            },
        ],
        height: '600px',
    };

    // 导出相关
    exportMsg = {
        url: '/checkResult/export',
        submit: {
            // checkData: '',
            // checkResult: '',
            // checkTable: '',
            // ruleId: '',
            // paging: { total: 15, currentPage: 1, pageSize: 20 },
            selectKey: [],
        },
    };

    loading: boolean = false;

    // 表格勾选数据
    selectData: any[] = [];

    // 当前页或所有页
    pageType: string = '0';

    // 列表详情弹窗
    private detailsVisible: boolean = false;

    // 列表详情数据
    private tableDetalis: [];

    mounted() {
        this.getCheckResultList();
    }

    // 获取勾稽结果列表
    getCheckResultList(paging?: any) {
        if (paging) {
            this.checkResultListMsg.submit.paging = paging;
        }
        this.loading = true;
        this.$axios.post(this.checkResultListMsg.url, this.checkResultListMsg.submit).then((res: any) => {
            res.list.forEach(ele => {
                // 指标类型
                // boundCode有值代表指标类型是范围 enCalFacCode有值代表指标类型是因子
                ele.targetType = ele.enCalFacCode ? '因子' : ele.boundCode ? '范围' : '';
                // 指标编号
                ele.targetCode = ele.enCalFacCode ? ele.enCalFacCode : ele.boundCode;
                // 指标名称
                ele.targetName = ele.enCalFacName ? ele.enCalFacName : ele.boundName;
                // 执行结果颜色
                ele.checkResultColor = ele.checkResult === '1' ? 'orange' : ele.checkResult === '2' ? 'red' : '';
            });
            this.checkResultListMsg.returnData = res;
            this.loading = false;
        });
    }

    // 查询按钮事件
    searchCheckResultList() {
        // 搜索重置页码
        this.checkResultListMsg.submit.paging.currentPage = 1;
        this.getCheckResultList();
    }

    // 勾选事件
    handleChecked(e, type) {
        this.selectData = e;
        this.pageType = type;
    }

    // 勾稽规则结果列表详情按钮事件
    handleDetailsBtn(val) {
        this.detailsVisible = true;
        // console.log(' val.row.children', val.row.children);
        val.row.children.forEach(ele => {
            // 指标类型
            // boundCode有值代表指标类型是范围 enCalFacCode有值代表指标类型是因子
            ele.targetType = ele.enCalFacCode ? '因子' : ele.boundCode ? '范围' : '';
            // 指标编号
            ele.targetCode = ele.enCalFacCode ? ele.enCalFacCode : ele.boundCode;
        });
        this.tableDetalis = val.row.children;
    }

    // 导出明细
    export(): void {
        downLoadFile({
            url: this.exportMsg.url,
            method: 'post',
            data: this.exportMsg.submit,
        });
    }

    // 导出Excel
    exportCheckResult() {
        if (this.pageType === '0') {
            let keys = [];
            this.selectData.forEach(ele => {
                keys.push(ele.resultId);
            });
            this.exportMsg.submit.selectKey = keys;
            this.export();
        }
        if (this.pageType === '1') {
            this.checkResultListMsg.submit.paging = { total: 0, currentPage: 1, pageSize: 2147483647 };
            return new Promise((resolve, reject) => {
                this.$axios.post(this.checkResultListMsg.url, this.checkResultListMsg.submit).then((res: any) => {
                    let keys = [];
                    res.list.forEach(ele => {
                        keys.push(ele.resultId);
                    });
                    this.exportMsg.submit.selectKey = keys;
                    this.export();
                    resolve(res);
                });
            });
        }
    }
}
</script>

<style lang="scss" scoped>
#check-result {
    min-width: 1200px;
    .wall {
        padding: 15px;
        .search-box {
            padding-top: 15px;
            border: 1px solid #c9c9c9;
        }
        .table-box {
            height: calc(100vh - 120px);
            border: 1px solid #c9c9c9;
            margin-top: 10px;
        }
    }
}

/deep/ .vxe-table .vxe-table--body-wrapper.body--wrapper {
    height: calc(100vh - 220px) !important;
}
</style>
